import { SET_TODO, SET_TODO_LIST, REMOVE_TODO, SET_STATUS, SET_DOING } from '@/store/actionsTypes'
import { ITodo, TODO_STATUS } from '@/types'
import { Store, useStore } from 'vuex'
import { watch } from 'vue'

export interface IUseTodo {
  setTodo: (value: string) => void
  setTodoList: () => void
  removeTodo: (id: number) => void
  setStatus: (id: number) => void
  setDoing: (id: number) => void
}

export function useTodo(): IUseTodo {
  const store: Store<any> = useStore()
  const { setLocalList, getLocalList }: IUseLocalStorage = useLocalStorage()
  const todoList: ITodo[] = getLocalList()
  function setTodo(value: string): void {
    const todo: ITodo = {
      id: new Date().getTime(),
      content: value,
      status: TODO_STATUS.WILLDO,
    }
    store.dispatch(SET_TODO, todo)
  }
  function setTodoList(): void {
    store.dispatch(SET_TODO_LIST, todoList)
  }
  function removeTodo(id: number): void {
    store.dispatch(REMOVE_TODO, id)
  }
  function setStatus(id: number): void {
    store.dispatch(SET_STATUS, id)
  }
  function setDoing(id: number): void {
    store.dispatch(SET_DOING, id)
  }

  watch(
    () => store.state.list,
    (newValue: ITodo[]) => {
      setLocalList(newValue)
    },
    { deep: true },
  )

  return {
    setTodo,
    setTodoList,
    removeTodo,
    setStatus,
    setDoing,
  }
}

export interface IUseLocalStorage {
  getLocalList: () => ITodo[]
  setLocalList: (todoList: ITodo[]) => void
}

export function useLocalStorage(): IUseLocalStorage {
  function getLocalList(): ITodo[] {
    return JSON.parse(localStorage.getItem('todoList') || '[]')
  }
  function setLocalList(todoList: ITodo[]): void {
    localStorage.setItem('todoList', JSON.stringify(todoList))
  }
  return {
    getLocalList,
    setLocalList,
  }
}
